<template>
  <div>
    <ClickOutSide @click-outside="isPicker = false" :="$attrs">
      <div :class="[prefixCls, 'flex justify-center relative']">
        <Input
          :maxlength="30"
          v-model:value="color"
          placeholder="请输入需要的颜色代码"
          @blur="changeInput"
          v-if="showInput"
        >
          <template #addonAfter>
            <div
              :style="{ background: color }"
              class="h-4 w-4 cursor-pointer rounded"
              @click.stop="changePicker"
            >
            </div>
          </template>
        </Input>
        <div
          v-else
          :style="{ background: color }"
          class="h-4 w-4 cursor-pointer rounded"
          @click.stop="changePicker"
        >
        </div>
        <ColorPicker
          v-if="isPicker"
          class="absolute top-full box-content"
          :colors-default="defColor"
          :color="color"
          :sucker-hide="true"
          theme="light"
          :sucker-canvas="suckerCanvas"
          @open-sucker="openSucker"
          @change-color="changeColor"
        >
          <!-- <div class="mt-4">
          <Button @click.stop="changePicker" size="small"> 关闭 </Button>
        </div> -->
        </ColorPicker>
      </div>
    </ClickOutSide>
  </div>
</template>

<script lang="ts" setup name="ColorPicker">
  import { ref, computed } from 'vue';
  // import { onClickOutside } from '@vueuse/core';
  import { Input } from 'ant-design-vue';
  import { ClickOutSide } from '/@/components/ClickOutSide';
  import { ColorPicker } from 'vue-color-kit';
  import 'vue-color-kit/dist/vue-color-kit.css';

  import { useDesign } from '/@/hooks/web/useDesign';
  const { prefixCls } = useDesign('ColorPicker');
  const props = withDefaults(
    defineProps<{
      value: string | null;
      input: boolean;
    }>(),
    {
      value: '#2B63A1',
      input: false,
    },
  );
  const emit = defineEmits(['update:value', 'change']);
  const color = computed({
    get: () => props.value || '',
    set: (value) => {
      emit('update:value', value);
      emit('change', value);
    },
  });

  const showInput = computed(() => props.input);
  const isPicker = ref(false);
  const suckerCanvas = ref(null);
  const defColor = ref(['#2B63A1', '#C7C7C7', '#FF522B', '#4DB803']);

  const changePicker = () => {
    isPicker.value = !isPicker.value;
  };
  const changeInput = () => {
    if (color.value && !CheckIsColor(color.value)) {
      color.value = '#2B63A1';
    }
  };
  // onClickOutside(target, (event) => console.log(event));

  const changeColor = (clo) => {
    // {
    //   "rgba": {
    //         "r": 111,
    //         "g": 129,
    //         "b": 150,
    //         "a": 1
    //     },
    //     "hsv": {
    //         "h": 212,
    //         "s": 0.26,
    //         "v": 0.59
    //     },
    //     "hex": "#6F8196"
    // }
    const { r, g, b, a } = clo.rgba;

    color.value = `rgba(${r}, ${g}, ${b}, ${a})`;
  };

  const openSucker = (isOpen) => {
    if (isOpen) {
      // ... canvas be created
      // this.suckerCanvas = canvas
      // this.suckerArea = [x1, y1, x2, y2]
    } else {
      // this.suckerCanvas && this.suckerCanvas.remove
    }
  };

  function CheckIsColor(bgVal: string): boolean {
    let type = '';
    if (/^rgb\(/.test(bgVal)) {
      //如果是rgb开头，200-249，250-255，0-199
      type =
        '^[rR][gG][Bb][\(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){2}[\\s]*(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)[\\s]*[\)]{1}$';
    } else if (/^rgba\(/.test(bgVal)) {
      //如果是rgba开头，判断0-255:200-249，250-255，0-199 判断0-1：0 1 1.0 0.0-0.9
      type =
        '^[rR][gG][Bb][Aa][\(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){3}[\\s]*(1|1.0|0|0.[0-9])[\\s]*[\)]{1}$';
    } else if (/^#/.test(bgVal)) {
      //六位或者三位
      type = '^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$';
    } else if (/^hsl\(/.test(bgVal)) {
      //判断0-360 判断0-100%(0可以没有百分号)
      type =
        '^[hH][Ss][Ll][\(]([\\s]*(2[0-9][0-9]|360｜3[0-5][0-9]|[01]?[0-9][0-9]?)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*)[\)]$';
    } else if (/^hsla\(/.test(bgVal)) {
      type =
        '^[hH][Ss][Ll][Aa][\(]([\\s]*(2[0-9][0-9]|360｜3[0-5][0-9]|[01]?[0-9][0-9]?)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*,){2}([\\s]*(1|1.0|0|0.[0-9])[\\s]*)[\)]$';
    }
    let re = new RegExp(type);
    if (bgVal.match(re) == null) {
      return false;
    } else {
      return true;
    }
  }
</script>
<style lang="less" scoped></style>
